import { useParams } from "react-router-dom";
import MyNavbar from "../../Share/MyNavbar";
import { getZlxq } from "../../request/index";
import { Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import "./Xq.css";
function Xq() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [xqsj, setXqsj] = useState<any[]>([]);
  useEffect(() => {
    getZlxq(id).then((res) => {
      console.log(res);
      setXqsj(res.data.data);
    });
  }, []);
  const data = [
    {
      imgPath: "https://picsum.photos/200/300?random=1",
      showCity: "北京",
      showName: "科技展：未来生活体验",
      showPrice: "80元",
      showDetail:
        "通过各种高科技展品和互动体验，展示未来生活可能的样子，包括智能家居、虚拟现实等前沿科技应用",
    },
  ];
  return (
    <div>
      <MyNavbar />
      <h2>ID值为:{id}</h2>
      {data.map((item) => {
        return (
          <>
            <img
              style={{
                borderRadius: "25px",
                margin: "20px",
                height: "200px",
                width: "90%",
              }}
              src={item.imgPath}
              alt=""
            />
            <h2 style={{ margin: "10px" }}>{item.showCity}</h2>
            <h2 style={{ margin: "10px" }}>{item.showName}</h2>
            <h2 style={{ margin: "10px" }}>{item.showPrice}</h2>
            <h2 style={{ margin: "10px" }}>{item.showDetail}</h2>
          </>
        );
      })}
      <div className="xq-div">
        <h2>￥897</h2>
        <Button onClick={() => navigate("/shop")}>立即购票</Button>
      </div>
    </div>
  );
}

export default Xq;
